﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>也许有用 技术论坛 - MAYBE IT WORKS</title>
<link th:href="@{/show/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
<link th:href="@{/show/css/style.css}" type="text/css" rel="stylesheet">
<link th:href="@{/show/css/nprogress.css}" type="text/css" rel="stylesheet">
  <link th:href="@{/layui/css/layui.css}" type="text/css" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/show/css/imgSizeSmall.css}">
  <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js" type="text/javascript"></script>
    <script src="js/respond.min.js" type="text/javascript"></script>
    <script src="js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
  <link rel="apple-touch-icon-precomposed" th:href="@{/show/images/icon/icon.png}">
  <link rel="shortcut icon" th:href="@{/show/images/icon/favicon.ico}">
  <script th:src="@{/layui/layui.js}"type="text/javascript"></script>
<meta name="Keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
//判断浏览器是否支持HTML5
/*window.onload = function() {
	if (!window.applicationCache) {
		window.location.href="ie.html";
	}
}*/
</script>
<style>
  body {
    cursor: url('https://blog-static.cnblogs.com/files/lucas--liu/cat6.ico'), auto;
  }
</style>
</head>

<body>
<!--user-select 禁止文字选中-->
<section class="container ">
  <header th:replace="~{show/main :: leftbar}"></header>
  <!--/超小屏幕可见-->
  <div class="content-wrap"><!--内容-->
    <div class="content">
      <header class="news_header">
        <h2 th:text="${article.getTitle()}">欢迎来到异清轩技术博客</h2>
        <ul>
          <li th:text="${article.getAuthor()}+'发布于'+${#dates.format(article.getCreateTime(),'yyyy-MM-dd')}">admin 发布于 2015-06-29</li>
          <li>栏目：<a href="" title="" target="_blank" th:text="${groups.getGname()}">网站前端</a></li>
          <li>来源：<a href="" title="" target="_blank">互联网</a></li>
          <li>共 <strong th:text="${article.getHits()}">2345</strong> 人围观 </li>
          <li><strong th:text="${article.getHits()-article.getZan()}">123</strong> 个不明物体</li>
        </ul>
      </header>
      <article class="news_content" id="news_content">
        <textarea id="article-content" style="" placeholder="markdown" th:text="${article.getContent()}"></textarea>
      </article>
      <div class="reprint">转载请说明出处：<a href="" title="" target="_blank">异清轩技术博客</a> » <a href="" title="" target="_blank">欢迎来到异清轩技术博客</a></div>
        <!--<div class="zambia">
          <a id="zan" style="width: 100px" name="zambia" rel=""><span class="glyphicon glyphicon-thumbs-up"></span> 赞（<font id="zanNum" th:text="${article.getZan()}"></font>）</a>
          <a id="shoucang" style="margin-left: 10px" name="shoucang" rel=""><span class="glyphicon glyphicon-thumbs-up"></span> 收藏 </a>
        </div>-->
      <div class="tags news_tags" >
          标签： <span data-toggle="tooltip" data-placement="bottom"th:each="tag:${#strings.arraySplit(article.getTags(),';')}" th:title="'查看关于'+${tag}+'的文章'">
          <a href="" th:text="${tag}">本站</a>
                </span>
      </div>
      <div  class="layui-row layui-col-space15 ">
        <div class="layui-col-md12" >
          <div class="layui-panel">
            <hr>
            <div class="layui-col-md9"><font th:text="${article.getAuthor()}"></font></div>
            <div class="layui-col-md3">
              <a id="zan" style="text-decoration: none;">
                <i th:if="${chart1!='yeszan'}" class="layui-icon" style="font-size: 24px;margin-left: 10px">&#xe6c6;</i>
                <i th:if="${chart1=='yeszan'}" class="layui-icon" style=" color: #0ab2d2;font-size: 24px;margin-left: 10px">&#xe6c6;</i>
              </a>
              <font id="zanNum" style="margin-left:5px;font-size: 16px;" th:text="${article.getZan()}"></font>
              <a style="text-decoration: none;"><i class="layui-icon" style="font-size: 24px;margin-left: 10px">&#xe63a;</i></a>
              <a id="shoucang" style="text-decoration: none;">
                <i th:if="${chart2!='yesshou'}" class="layui-icon" style="font-size: 24px;margin-left: 10px">&#xe600;</i>
                <i th:if="${chart2=='yesshou'}" class="layui-icon" style="color: #0ab2d2;font-size: 24px;margin-left: 10px">&#xe600;</i>
              </a>
              <input id="group" type="hidden">
              <font style="margin-left:5px;font-size: 16px" th:text="${article.getCollection()}"></font>
            </div>
          </div>
        </div>
      </div>
      <div class="content-block comment">
        <h2 class="title"><strong>评论</strong></h2>
        <form class="form-inline" id="comment-form">
          <div class="comment-form">
            <input type="hidden" id="ipHome" name="ipHome">
            <input type="hidden" id="ip" name="ip">
            <input type="hidden" id="articleId" name="articleId" th:value="${article.getArticleId()}">
            <input type="hidden" id="bauthor" name="bauthor" th:value="${article.getAuthor()}">
            <input type="hidden" id="father" name="father" value="0">
            <input type="hidden" id="idx" name="idx" value="0">
            <textarea placeholder="优质的评论可以帮助作者获得更高的权重" id="content" name="content"></textarea>
            <div class="comment-form-footer">
              <div class="comment-form-text">请先 <a href="javascript:;">登录</a> 或 <a href="javascript:;">注册</a>，才可以评论 </div>
              <div class="comment-form-btn">
                <button id="btn_comment" type="button" class="btn btn-default btn-comment">提交评论</button>
              </div>
            </div>
          </div>
        </form>
        <div class="comment-content">
          <ul>
            <li th:each="comment:${AComments}">
              <span class="face" >
                <img th:src="@{/upload/userimg/}+${comment.getAvatar()}" alt="">
              </span>
              <span class="text">
                <strong  th:text="${comment.getAuthor()}">异清轩站长</strong>
                <span class="layui-badge layui-bg-gray" th:text="${'IP属地:'+comment.getIpHome()}">灰</span>
                <span th:if="${article.getAuthor()==comment.getAuthor()}" class="layui-badge layui-bg-blue">博主</span>
                (<font th:text="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">2015-10-18</font>)
               <!-- <button th:onclick="'javascript:hui(\''${article.getArticleId()}+','+${article.getAuthor()}+','+${comment.getId()}+','+${comment.getIdx()}'\')'" type="button" style="border-width: 0;color: #0a789b" class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue">回复</button><br />
                --><button th:if="${session.loginUser!=null}" th:onclick="hui([[${article.getArticleId()}]],[[${comment.getAuthor()}]],[[${comment.getId()}]],[[${comment.getIdx()}]])" type="button" style="border-width: 0;color: #0a789b" class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue">回复</button><br />
                <font  th:text="${comment.getContent()}">欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等 ...
                </font>
              </span>

              <ul style="margin-left: 25px" th:if="${comment.getSons().size()>0}">
                  <li th:each="son:${comment.getSons()}">
                    <span class="face" >
                      <img th:src="@{/upload/userimg/}+${son.getAvatar()}" alt="">
                    </span>
                        <span class="text">
                      <strong th:text="${son.getAuthor()}">异清轩站长</strong>
                          <span class="layui-badge layui-bg-gray" th:text="${'IP属地:'+son.getIpHome()}">灰</span>
                          <span th:if="${article.getAuthor()==son.getAuthor()}" class="layui-badge layui-bg-blue">博主</span>
                          (<font th:text="${#dates.format(son.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">2015-10-18</font>)
                          <font th:if="${son.getAuthor()!=article.getAuthor() && son.getBauthor()!=null}"> 回复 <strong th:text="${son.getBauthor()}"></strong></font>说：
                          <button th:if="${session.loginUser!=null}" th:onclick="hui([[${article.getArticleId()}]],[[${son.getAuthor()}]],[[${comment.getId()}]],[[${son.getIdx()}]])" type="button" style="border-width: 0;color: #0a789b" class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue">回复</button><br />
                      <font th:text="${son.getContent()}">欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等 ...
                      </font>
                    </span>
                  </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--/内容-->
  <aside th:replace="~{show/main :: rightbar}"><!--右侧>992px显示-->

  </aside>
  <!--/右侧>992px显示-->
  <footer th:replace="~{show/main :: bottombar}"></footer>
</section>
<div><a href="javascript:;" class="gotop" style="display:none;"></a></div>
<!--/返回顶部-->
<!--md css-->
<link rel="stylesheet" th:href="@{/md/css/editormd.preview.css}" />
<script th:src="@{/show/js/jquery-2.1.4.min.js}" type="text/javascript"></script>
<!--md 回显 要用的js-->
<script th:src="@{/md/lib/marked.min.js}"></script>
<script th:src="@{/md/lib/prettify.min.js}"></script>
<script th:src="@{/md/lib/raphael.min.js}"></script>
<script th:src="@{/md/lib/underscore.min.js}"></script>
<script th:src="@{/md/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/md/lib/flowchart.min.js}"></script>
<script th:src="@{/md/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/md/editormd.js}"></script>
<!---->
<script th:src="@{/show/js/nprogress.js}" type="text/javascript" ></script>
<script th:src="@{/show/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/show/js/comm/right.js}" type="text/javascript"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript"  th:inline="javascript">
//页面加载
$('body').show();
$('.version').text(NProgress.version);
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
//返回顶部按钮
$(function(){
	$(window).scroll(function(){
		if($(window).scrollTop()>100){
			$(".gotop").fadeIn();
		}
		else{
			$(".gotop").hide();
		}
	});
	$(".gotop").click(function(){
		$('html,body').animate({'scrollTop':0},500);
	});
});
//提示插件启用
$(function () {
  $('[data-toggle="popover"]').popover();
});
$(function () {
	$('[data-toggle="tooltip"]').tooltip();
});
//鼠标滑过显示 滑离隐藏
	//banner
$(function(){
	$(".carousel").hover(function(){
		$(this).find(".carousel-control").show();
	},function(){
		$(this).find(".carousel-control").hide();
	});
});
	//本周热门
$(function(){
	$(".hot-content ul li").hover(function(){
		$(this).find("h3").show();
	},function(){
		$(this).find("h3").hide();
	});
});
	//相关推荐
$(function(){
	$(".related-content ul li").hover(function(){
		$(this).find("h3").show();
	},function(){
		$(this).find("h3").hide();
	});
});
//页面元素智能定位
$.fn.smartFloat = function() {
	var position = function(element) {
		var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
		var pos = element.css("position"); //当前元素距离页面document顶部的距离
		$(window).scroll(function() { //侦听滚动时
			var scrolls = $(this).scrollTop();
			if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
				if (window.XMLHttpRequest) { //如果不是ie6
					element.css({ //设置css
						position: "fixed", //固定定位,即不再跟随滚动
						top: 0 //距离页面顶部为0
					}).addClass("shadow"); //加上阴影样式.shadow
				} else { //如果是ie6
					element.css({
						top: scrolls  //与页面顶部距离
					});
				}
			}else {
				element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式
					position: pos,
					top: top
				}).removeClass("shadow");//移除阴影样式.shadow
			}
		});
	};
	return $(this).each(function() {
		position($(this));
	});
};
//启用页面元素智能定位
$(function(){
	$("#search").smartFloat();
});


//ajax更新点赞值
/*$(function(){
    $(".content .zambia a").click(function(){
        var zambia = $(this);
       // var id = zambia.attr("rel"); //对应id
        zambia.fadeOut(1000); //渐隐效果
        var id=[[${article.getArticleId()}]];
      //  alert(id)

        $.ajax({
            type:"POST",
            url:"/show/zan/"+id,
            cache:false, //不缓存此页面
            success:function(data){
                zambia.html("<span class='glyphicon glyphicon-ok-sign'></span>已赞("+data+")");
                zambia.fadeIn(1000); //渐显效果
            }
        });
        return false;
    });
})*/
/*  $("#zan").click(function () {
    var zan= $("#zanNum").val();
    console.log(zan);
    alert(zan)
  })*/
layui.use('layer',function(){
  var layer=layui.layer;
});
//最新点赞
$("#zan").click(function () {
  var login = [[${session.loginUser}]];
  if (login==null){
    alert('请先登录');
  }else {
    var id=[[${article.getArticleId()}]];
    var bauthor=[[${article.getAuthor()}]];
    $.ajax({
      type:"POST",
      url:"/show/zan/"+bauthor+'/'+id+'/'+0,
      async: false,
      success:function(data){
        if (data==1){
          window.location.reload();
        }
      }
    });

  }
});
//收藏
$("#shoucang").click(function () {
  var login = [[${session.loginUser}]];
  if (login==null){
    alert("请先登录");
  }else {
    if ([[${chart2}]]!='yesshou'){
      group()
    }else {
      var id=[[${article.getArticleId()}]];
      var bauthor=[[${article.getAuthor()}]];
      $.ajax({
        type:"POST",
        url:"/show/zan/"+bauthor+'/'+id+'/'+1,
        async: false,
        success:function(data){
          if (data==1){
            window.location.reload();
          }
        }
      });
    }
  }
});
function group(){
  var id=[[${article.getArticleId()}]];
  var bauthor=[[${article.getAuthor()}]];

  layer.open({
    type: 2,
    title:'收藏',
    area: ['400px', '450px'],
    resize: false,
    shadeClose: true, //点击遮罩关闭
    content: [[@{/show/collectGroup/}]]+bauthor+'/'+id
  });
}
//评论部分
$("#btn_comment").click(function () {
  var login = [[${session.loginUser}]];
  if (login==null){
    alert("请先登录")
  }else {
    if ($("#content").val()==''){
      alert("不可以为空")
      return false
    }
    console.log(returnCitySN["cip"]+','+returnCitySN["cname"])
    $("#ip").val(returnCitySN["cip"]);
    $("#ipHome").val(returnCitySN["cname"]);
    $.ajax({
      type: 'post',
      url: '/show/comment',
      data: $('#comment-form').serialize(),
      dataType: "text",
      async: false,
      success: function (data) {
        if (data==1){
          $("#content").val("");
            window.location.reload()
        }
      }
    });
  }
})
function btn_hui() {
  var login = [[${session.loginUser}]];
  if (login == null) {
    alert("请先登录")
  } else {
    if ($("#show2").val()==''){
      alert("不可以为空")
      return false
    }
    $.ajax({
      type: 'post',
      url: '/show/comment',
      data: $('#comment-form_hui').serialize(),
      dataType: "text",
      async: false,
      success: function (data) {
        if (data == 1) {
          $("#content").val("");
            window.location.reload()
        }
      }
    });
  }
}
//回复功能
function hui(id,author,fid,idx) {
  /* alert(id+'-'+author+'-'+fid+'-'+idx);*/
  $(".showhui").hide();
  var that=$(event.target);
  var s=that.parent().parent('li');

  that.parent().append('<li class="showhui"><form class="form-inline" id="comment-form_hui">\n' +
          '          <div class="comment-form">\n' +
          '            <input type="hidden"  name="articleId" value="'+id+'">\n' +
          '            <input type="hidden"  name="bauthor" value="'+author+'">\n' +
          '            <input type="hidden"  name="father" value="'+fid+'">\n' +
          '            <input type="hidden"  name="idx" value="'+idx+'">\n' +
          '            <textarea id="show2" placeholder="优质的评论可以帮助作者获得更高的权重"  name="content"></textarea>\n' +
          '            <div class="comment-form-footer">\n' +
          '              <div class="comment-form-text">请先 <a href="javascript:;">登录</a> 或 <a href="javascript:;">注册</a>，才可以评论 </div>\n' +
          '              <div class="comment-form-btn">\n' +
          '                <button onclick="btn_hui()" type="button" class="btn btn-default btn-comment">提交评论</button>\n' +
          '              </div>\n' +
          '            </div>\n' +
          '          </div>\n' +
          '        </form></li>')
    f()
}
function f() {
  $("#show2").blur(function () {
    $(".showhui").hide();
    /*$(".showhui").empty();*/
  })
}
</script>
<!--md-->
<script type="text/javascript">
  var testEditor;
  $(function () {
    testEditor = editormd.markdownToHTML("news_content", {//注意：这里是上面DIV的id
      htmlDecode: "style,script,iframe",
      emoji: true,
      taskList: true,
      tocm: true,
      tex: true, // 默认不解析
      flowChart: true, // 默认不解析
      sequenceDiagram: true, // 默认不解析
      codeFold: true
    });
  });
</script>
<script>
  // 监听整个网页的copy(复制)事件
  document.addEventListener('copy', function (event) {
    // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
    let clipboardData = event.clipboardData || window.clipboardData;
    // 如果未复制或者未剪切，则return出去
    if (!clipboardData) { return; }
    // Selection 对象，表示用户选择的文本范围或光标的当前位置。
    //     声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
    let text = window.getSelection().toString();
    if (text) {
      // 如果文本存在，首先取消文本的默认事件
      event.preventDefault();
      // 通过调用常clipboardData对象的 setData(format, data) 方法；来设置相关文本

      // setData(format, data);参数
      // format
      // 一个DOMString 表示要添加到 drag object的拖动数据的类型。
      // data
      // 一个 DOMString表示要添加到 drag object的数据。
      var url = window.location.href;
      var txt = '————————————————\n版权声明：本文为也许有用博主「'+$("#bauthor").val()+'」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。\n原文链接：'+url
      clipboardData.setData('text/plain', text + '\n\n'+txt);
    }
  });
  /*document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};*/
 /* document.onkeydown = function() {

    if (window.event && window.event.keyCode == 123) {

      layer.msg("F12被禁用");

      event.keyCode = 0;

      event.returnValue = false;

    }
  }*/
  document.onkeydown=function(){
    var e = window.event||arguments[0];
    if(e.keyCode==123){
      layer.msg("F12被禁用");
      alert('禁止F12和鼠标右键了！www.qipa250.com');
      return false;
    }else if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode==73)){
      layer.msg("F12被禁用");
      alert('禁止F12和鼠标右键了！www.qipa250.com');
      return false;
    }else if((e.ctrlKey)&&(e.keyCode==85)){
      layer.msg("F12被禁用");
      alert('禁止F12和鼠标右键了！www.qipa250.com');
      return false;
    }else if((e.ctrlKey)&&(e.keyCode==83)){
      layer.msg("F12被禁用");
      alert('禁止F12和鼠标右键了！www.qipa250.com');
      return false;
    }
  }
/*  document.oncontextmenu=function(){
    alert('禁止F12和鼠标右键了！www.qipa250.com');
    return false;
  }*/

</script>

<script>
  // 鼠标点击特效
  var a_idx = 0;
  $("body").click(function(e) {
    var a = new Array("❤感谢观看❤","❤","❤喜欢就点个赞呗❤","❤❤","❤快去点赞❤","❤❤❤","❤不是点这里哦❤","❤❤","❤点赞在底部啦❤","❤","❤❤");
    var $i = $("<span></span>").text(a[a_idx]);
    a_idx = (a_idx + 1) % a.length;
    var x = e.pageX,
            y = e.pageY;
    $i.css({
      "z-index": 999999999999999,
      "top": y - 20,
      "left": x,
      "position": "absolute",
      "font-weight": "bold",
      "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
    });
    $("body").append($i);
    $i.animate({
              "top": y - 180,
              "opacity": 0
            },
            1500,
            function() {
              $i.remove();
            });
  });
</script>

<script>
  // $('body').mouseup(function(ev){
  //   var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
  //   if (txt == ''){
  //     return false
  //   }
  //   var mDiv = document.getElementById('carBox');
  //   if(mDiv){
  //     document.body.removeChild(mDiv);
  //   }
  //   var oEvent=ev||event;
  //   var oDiv=document.createElement('div');
  //   oDiv.id = "carBox";
  //   oDiv.style.left=(oEvent.clientX-130)+'px';  // 指定创建的DIV在文档中距离左侧的位置
  //   oDiv.style.top=(oEvent.clientY-145)+'px';  // 指定创建的DIV在文档中距离顶部的位置
  //   oDiv.style.border='1px solid #0000FF'; // 设置边框
  //   oDiv.style.borderRadius = '25px';
  //   oDiv.style.background='rgba(0,0,0,0.5)';
  //   oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
  //   oDiv.style.width='260px'; // 指定宽度
  //   oDiv.style.height='135px'; // 指定高度
  //   $(oDiv).attr('z-index',999999999);
  //   var content = '<div style="padding: 10px;color: #FFF;font-size: 10px;">'+
  //           '<div style="width:100%;height:100px;overflow:auto;">'+
  //           '<table style="float:top;width:100%;height:100%;">'+
  //           '<tr><td style="width:60px;">设备号:</td><td>'+txt+'</td></tr>'+
  //           '<tr><td style="width:60px;">当前位置:</td><td>北京市顺义区军营南街10号</td></tr>'+
  //           '<tr><td style="width:60px;">更新时间:</td><td>2018-11-20 09:39:20</td></tr>'+
  //           '</table>'+
  //           '</div>'+
  //           '<div style="float:bottom;width:100%;">'+
  //           '<a href="./a.html" style="float:left;margin-left:30px;">历史轨迹</a>'+
  //           '<a href="./a.html" style="float:right;margin-right:30px;">视频查看</a>'+
  //           '</div>'+
  //           '</div>';
  //   oDiv.innerHTML = content;
  //   document.body.appendChild(oDiv);
  //   // alert(txt);
  // })
</script>
</body>
</html>
